import React from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import { connect } from 'react-redux';
import './Discover.css';
import Recommend from './Recommend'

class Discover extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: ['1', '2', '3']
        }
        props.getBannerList()
    }
    //   componentDidMount() {
    //     // simulate img loading
    //     setTimeout(() => {
    //       this.setState({
    //         data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    //       });
    //     }, 100);
    //   }
    render() {
        let data = this.props.discover.bannerList || [];
        // console.log(data);
        return (
            <div>
                <WingBlank>
                    <Carousel autoplay={true} infinite className='bannerContain'
                    // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    // afterChange={index => console.log('slide to', index)}
                    >
                        {data.map(val => (
                            <a key={val} href={val.imageUrl} style={{ display: 'inline-block', width: '100%', position: 'relative' }}
                                className="banner-a">
                                <img
                                    src={val.imageUrl}
                                    alt=""
                                    style={{ width: '100%', display: "block", height: '100%' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                                <div className='label' style={{background:val.titleColor}}>{val.typeTitle}</div>
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>
                <div className='discover-recommend'>
                    <Recommend/>      
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    // console.log(state);
    return {
        discover: state.discover
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getBannerList() {
            fetch('http://106.12.79.128:666/banner?type=1').then(res => res.json())
                // .then(res=>console.log(res.banners))
                .then(res => dispatch({ type: 'ADDBANNERS', payload: res.banners })).catch(e => console.log(e))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Discover);